import React, {Component} from 'react';
import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  Path,
  Rect,
  Image,
  Defs,
  LinearGradient,
  Stop,
  ClipPath,
} from 'react-native-svg';
import {
  View,
  StyleSheet,
  ScrollView,
  Text as RNText,
  Image as RNImage,
  Button,
} from 'react-native';
import {Tester, Filter, TestCase, TestSuite} from '@rnoh/testerino';

const dataUriExample =
  '';

const samples = [
  LinearGradientExample,
  ImageExample,
];

class LinearGradientExample extends Component {
  static title = 'The base64 conversion of SVG graphics';
  root?:Svg | null;
    state = {
        base64: null,
    };
    alert = () => {
        this.root?.toDataURL((base64: string) => {
            console.log(base64);
            this.setState({base64})
        },new Object())
    }
  render() {
    return (
      <View>
        <Button title='GetBase64' onPress={this.alert} />
      <Svg width="400" height="200" viewBox="0 0 500 400" ref={ele=>{this.root = ele;}}>
        <Defs>
          <LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <Stop offset="0%" stopColor="rgb(255,0,0)" />
            <Stop offset="100%" stopColor="rgb(0,0,255)" />
          </LinearGradient>
        </Defs>
        <Rect x="50" y="50" width="200" height="100" fill="url(#gradient)" />
        <Circle
          cx="300"
          cy="200"
          r="100"
          stroke="black"
          strokeWidth="5"
          fill="none"
        />
        <Text
          x="300"
          y="205"
          textAnchor="middle"
          fontSize="24"
          fill="url(#gradient)">
          SVG Circle
        </Text>
        <Path
          d="M100,100 C100,200 200,200 200,100"
          stroke="green"
          strokeWidth="2"
          fill="none"
        />
        <Rect x="400" y="50" width="100" height="100" fill="blue"></Rect>
        <Ellipse
          cx="50"
          cy="300"
          rx="100"
          ry="50"
          fill="url(#gradient)"></Ellipse>
      </Svg>
      <RNText style={{fontSize: 8, color: 'black'}} numberOfLines={5}>  
        {`data:image/png;base64,${this.state.base64}`}
      </RNText>
      <View style={{width: 400, height: 200, borderWidth: 1, marginTop: 5}}>
          {this.state.base64 && (
            <RNImage
              source={{uri: `data:image/png;base64,${this.state.base64}`}}
              style={{width: 400, height: 200}}
            />
          )}
        </View>
      </View>
    );
  }
}

class ImageExample extends Component {
  static title = 'The base64 conversion of url image';
  state = {
    base64: String,
  }
  root?:Svg | null;
  alert = () => {
    this.root?.toDataURL((base64: String) => {
        console.log(base64)
        this.setState({
            base64,
        })
    },new Object())
  }
  render() {
    return (
      <View>
        <Button title='GetBase64' onPress={this.alert} />
        <Svg height="100" width="100" ref= {ele=>{this.root = ele}}>
            <Defs>
            <ClipPath id="image-clip">
                <Circle cx="50%" cy="50%" r="40%" />
            </ClipPath>
            </Defs>
            <Rect x="0" y="0" width="100%" height="100%" fill="red" />
            <Rect x="5%" y="5%" width="50%" height="90%" />
            <Image
            x="5%"
            y="5%"
            width="50%"
            height="90%"
            preserveAspectRatio="xMidYMid slice"
            opacity="0.5"
            href={{uri: dataUriExample}}
            clipPath="url(#image-clip)"
            />
            <Text
            x="50"
            y="50"
            textAnchor="middle"
            fontWeight="bold"
            fontSize="16"
            fill="blue">
            HOGWARTS
            </Text>
      </Svg>
        <RNText style={{fontSize: 8, color: 'black'}} numberOfLines={5}>  
        {`data:image/png;base64,${this.state.base64}`}
        </RNText>
        <View style={{width: 150, height: 150, borderWidth: 1, marginTop: 5}}>
        {this.state.base64 && (
            <RNImage
            source={{uri: `data:image/png;base64,${this.state.base64}`}}
            style={{width: 150, height: 150}}
          />
        )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 100,
    width: 200,
    backgroundColor: 'red',
  },
  svg: {
    height: '80%',
    width: '80%',
    flex: 1,
    alignSelf: 'stretch',
  },
});

export default function() {
    return(
      <Tester style={{flex: 1}}>
        <ScrollView>
          <TestCase itShould="The base64 conversion of SVG graphics">
            <LinearGradientExample />
          </TestCase>
          <TestCase itShould="The base64 conversion of url image">
            <ImageExample />
          </TestCase>
        </ScrollView>
      </Tester>
    )
}